﻿<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

<link rel="stylesheet" type="text/css" media="screen" href="css/smoothness/jquery-ui-1.10.3.custom.min.css" />	<!-- jqueryUI CSS -->
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />							<!-- jqGrid CSS -->
<link rel="stylesheet" type="text/css" media="screen" href="css/selfTemplate.css" />						<!-- 本專案自行定義 CSS -->

<script src="js/jquery-1.9.1.min.js"></script>		<!-- jQuery 核心 -->
<script src="js/grid.locale-tw.js" type="text/javascript"></script>											<!-- jqGrid 語系檔 -->
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>										<!-- jqGrid 核心 -->
<script src="js/jquery-ui-1.10.3.custom.min.js" type="text/javascript"></script>							<!-- jqueryUI 核心 -->
<script src="js/jquery.cookie.js"></script>																	<!-- 操作cookie用 -->
<script src="js/widgets.js" type="text/javascript"></script>												<!-- 本專案自行定義 JS -->

<title>維護人員</title>
<style type="text/css">
/*表格斜線*/
.out {
	border-top: 40px #D6D3D6 solid; /*上邊框寬度等於表格第一行行高*/
	width: 0px; /*讓容器寬度為0*/
	height: 0px; /*讓容器高度為0*/
	border-left: 90px #BDBABD solid; /*左邊框寬度等於表格第一行第一格寬度*/
	position: relative; /*讓裡面的兩個子容器絕對定位*/
}

b {
	font-style: normal;
	display: block;
	position: absolute;
	top: -40px;
	left: -35px;
	width: 35px;
}

em {
	font-style: normal;
	display: block;
	position: absolute;
	top: -20px;
	left: -85px;
	width: 55x;
}
</style>


<script type="text/javascript">

var tmp = "";

/* function selRole(obj) {
	
	var roleValue = $(obj).parent().parent().next().children("td").next().children("textarea").val();
	var n = roleValue.split("(");
	var roleStr = "";
	
	for (a=1;a<n.length;a++) {
		roleStr += (n[a]).substring(0,1)+"_";
	}
	
	if (roleStr != "") { roleStr = roleStr.substring(0,roleStr.length-1); }
	
	$.post("QueryRoleList",function(reses) {
		$("thead#roleList tr").remove();
		tmp = "<tr><td><div class='out'><b>角色</b><em>子系統</em></div></td>";
		$.each(reses,function(i, res) {
			tmp += "<th>"+ res.name + "</th>";
		});
		tmp += "</tr>";
		$("thead#roleList").append(tmp);
	},"JSON");
	
	$.post("QuerySubSys",{fc:"personnel"},function(reses) {
		$("tbody#subsysList tr").remove();
		$.each(reses,function(i, res) {
			tmp = "<tr><th>"+ res.name + "</th><td class='center'><input onclick=newbie(this) value='No' type='checkbox' id='"+res.id+i+"1' ><label  for='"+res.id+i+"1'>&nbsp;</label></td><td class='center'><input onclick=newbie(this) value='No' type='checkbox' id='"+res.id+i+"2' ><label  for='"+res.id+i+"2'>&nbsp;</label></td><td class='center'><input onclick=newbie(this) value='No' type='checkbox' id='"+res.id+i+"3' ><label  for='"+res.id+i+"3'>&nbsp;</label></td><td class='center'><input onclick=newbie(this) value='No' type='checkbox' id='"+res.id+i+"4' ><label  for='"+res.id+i+"4'>&nbsp;</label></td></tr>";
			$("tbody#subsysList").append(tmp);
			
			$("#"+res.id+i+"1").button({icons:{ primary: "ui-icon-close" }});
			$("#"+res.id+i+"2").button({icons:{ primary: "ui-icon-close" }});
			$("#"+res.id+i+"3").button({icons:{ primary: "ui-icon-close" }});
			$("#"+res.id+i+"4").button({icons:{ primary: "ui-icon-close" }});
		});
		
	},"JSON");
	
	$("#rolePicker").css("visibility", "visible").dialog({
		resizable : true,
		modal : true,
		width : 370,
		height : 300,
		show: "slide",
		hide: "slide",
		buttons : {
			"關閉" : function() {
				$("#rolePicker").dialog("close");
			}
		}
	});	
	
} 
function newbie(obj){
	if ( $(obj).val()=="No" ) {
		$(obj).val("Yes").button("option", "icons", { primary: "ui-icon-check"});
	} else {
		$(obj).val("No").button("option", "icons", { primary: "ui-icon-close"});
	}
};

 function isQuery(obj){
	if ( $(obj).val() == "Yes" ) {	//現在是查詢，但因為按下鈕，所以要改成編輯人員
		$(obj).val("No").button("option", "icons", { primary: "ui-icon-close"});
		$("#parTable th").hide();
		$("#parTable select").hide();
		
		jQuery("#gd").jqGrid('setGridParam',{
			url: "QueryPersonnel",
			datatype: "json"
		}).jqGrid("setCaption","所有人員列表").jqGrid("navGrid","#pager",{add:true,edit:true,del:true,search:false,refresh:false}).trigger('reloadGrid');
	} else {
		$(obj).val("Yes").button("option", "icons", { primary: "ui-icon-check"});
		$("#parTable th").show();
		$("#parTable select").show();
		jQuery("#gd").jqGrid("navGrid","#pager",{add:false,edit:false,del:false,search:false,refresh:false});
	}
}; */

function checkDuplicated() {
	var userId = $("#userid").val();
	var ll = $("#gd").jqGrid('getDataIDs');
	var isDuplicated = false;
	for(var i=0;i<ll.length;i++){
		if (ll[i] == userId ) {
			isDuplicated = true;
		}
	}
	
	if (isDuplicated) {
		alert(userId+"已經存在，人員ID不可重覆 !");
	} else {
		var userName = $("#username").val();
		var phoneNum = $("#phonenum").val();
		var email = $("#email").val();
		var pwd = $("#pwd").val();
		var dataAdd = {"userid":userId,"pwd":pwd,"username":userName,"phonenum":phoneNum,"email":email};
		var _iCount = $("#gd").jqGrid('getGridParam', 'records');
		$("#gd").jqGrid('addRowData', _iCount+1,dataAdd);
	} 
	return [];
}


$(document).ready(function() {
	
	if ($.cookie("userId") == null) {
		alert("請先登入系統");
		location.assign("index.html");
	} else {

		$("#a_form #loginUser").val( $.cookie("userId") );
		$("#a_form #isSU").val( $.cookie("isSU") );
		$(".dialog").css("visibility","hidden");
		initPage("維護人員");
	}
	
	$("#gd").jqGrid({
		url:'QueryPersonnel',
		datatype: "json",
		type: "post",
	   	colNames:['人員ID','人員名稱','連絡電話','電子郵件','登入密碼'],
	   	colModel:[
	   		{name:'userid',index:'userid',key:true,editable:true,editoptions:{size:10,maxlength:12},editrules:{required:true}},
	   		{name:'username',index:'username',editable:true,editoptions:{size:7,maxlength:5},editrules:{required:true}},
	   		{name:'phonenum',index:'phonenum',editable:true,editoptions:{size:9,maxlength:10}},
	   		{name:'email',index:'email',editable:true,editrules:{required:true,email:true}},
	   		{name:"pwd",editable:true,hidden: true, hidedlg: true, editrules:{edithidden:true},edittype:"password"}
	   	],
	   	rowNum: 6,
	   	forceFit:true,
	   	pager: '#pager',
	   	rownumbers: true,
	   	viewrecords: true,	
	    caption:"設定人員"
	}).jqGrid("navGrid","#pager",{add:true,edit:true,del:true,search:false,refresh:false},
	{	// edit
		url: "ManipulateGridPersonnel",
		mtype: "POST",
		editData: { 
			currentUser: function() { return $.cookie("userId"); }
		},
		onclickSubmit:function() {
			var sysId = $("#userid").val();
			var sysName = $("#username").val();
			var dataAdd = {"userid":sysId, "username":sysName };
			$("#gd").jqGrid('setRowData', sysId,dataAdd);
		}
	},{	// add
		url: "ManipulateGridPersonnel",
		mtype: "POST",
		editData: { 
			currentUser: function() { return $.cookie("userId"); }
		},
		onclickSubmit:function() {
			checkDuplicated();
		}
	},{	// del
		url: "ManipulateGridPersonnel",
		mtype: "POST",
		delData: { 
			currentUser: function() { return $.cookie("userId"); }
		}
	}
);
	
	
}).tooltip();
</script>

</head>
<body>

<div id="header"></div>
<p>

<table id="gd"></table>
<div id="pager"></div>

<div id="rolePicker" class="dialog" title="角色選取">
		<table>
			<thead id="roleList"></thead>
			<tbody id="subsysList"></tbody>
		</table>
	</div>

<form id="a_form">
		<input type="hidden" id="fc" name="fc" />
		<input type="hidden" id="loginUser" name="loginUser" />	<!-- 查詢權限用 -->
		<input type="hidden" id="subSysId" name="subSysId" />
		<input type="hidden" id="isSU" name="isSU" />
	</form>


</body>
</html>